<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>登录</h1>
<!--    action提交的位置-->
<form id="form-login" action="login" method="post">
    <table>
        <tr>
            <td>用户名</td>
            <!--                必须写name，和参数名保持一致，如果不一致就用@Prame强制对上-->
            <!--                最典型行元素span-->
            <td><input name="username">
                <span style="color: red" id="span-username"></span>
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <!--                必须写name，和参数名保持一致，如果不一致就用@Prame强制对上-->
            <!--                最典型行元素span-->
            <td><input name="password">
                <span style="color: red" id="span-password"></span>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" onclick="login()" value="登录">
            </td>
    </table>
</form>
<script type="text/javascript">
    function login() {
        // alert("登录");
        $("#span-username").empty();
        $("#span-password").empty();
        //发送ajax请求 局部刷新
        $.ajax({
            /*url:请求提交的地址
            data:请求参数
            type:请求类型
            dataType:预期服务器返回的数据类型 text/xml/json
            success:请求成功(状态码为200时)后的回调函数
            error:请求失败(状态码非200时)后的回调函数，函数参数就是服务器响应的json对象
            */
            "url": "login",
            "data": $("#form-login").serialize(),
            "type": "post",
            "dataType": "json",
            "success": function (json) {
                if (json.state == 1) {
                    alert("登录成功---跳转首页--17：25");
                } else if (json.state == 2) {
                    $("#span-username").html("用户名不存在");
                }else{
                    $("#span-password").html("密码错误");
                }
            }
        });
    }
</script>
</body>
</html>